<template>
  <div class="contact-modal-mask">
    <div class="contact-modal">
      <span class="close-btn" @click="$emit('close')">&times;</span>
      <h2 class="contact-title">联系我们</h2>
      <div class="contact-tip">
        我们很乐意为您提供帮助！请通过以下方式联系我们，或点击在线客服按钮。
      </div>
      <div class="contact-list">
        <div class="contact-item">
          <img
            src="../assets/image/phone.svg"
            alt="电话"
            style="height: 25px; width: 25px; padding-right: 10px"
          />
          <span>电话：</span>
          <a href="tel:135-0597-6179" class="contact-link">135-0597-6179</a>
        </div>
        <div class="contact-item">
          <img
            src="../assets/image/mail.svg"
            alt="邮箱"
            style="height: 25px; width: 25px; padding-right: 10px"
          />
          <span>邮箱：</span>
          <a href="mailto:981852486@qq.com" class="contact-link"
            >981852486@qq.com</a
          >
        </div>
        <div class="contact-item">
          <img
            src="../assets/image/address.svg"
            alt="地址"
            style="height: 25px; width: 25px; padding-right: 10px"
          />
          <span>地址：福建省泉州市张坂镇</span>
        </div>
      </div>
      <button class="online-btn" @click="openRobotChat">
        <img
          src="../assets/image/customer.svg"
          alt="客服"
          style="height: 25px; width: 25px; padding-right: 10px"
        />
        智能客服
      </button>
    </div>
  </div>
</template>

<script setup>
// 无需额外逻辑
const openRobotChat = () => {
  // 在新标签页中打开，不设置窗口大小和位置参数
  window.open("#/robot", "_blank");
};
</script>

<style scoped>
.contact-modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-modal {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 36px 36px 32px 36px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 4px 32px rgba(140, 38, 230, 0.1);
  min-width: 320px;
  animation: popup-fade-in 0.2s;
}
@keyframes popup-fade-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.close-btn {
  position: absolute;
  right: 18px;
  top: 18px;
  font-size: 2rem;
  color: #444;
  cursor: pointer;
  z-index: 10;
  font-weight: bold;
  background: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn:hover {
  background: #8d26e6;
  color: #fff;
}
.contact-title {
  color: #8d26e6;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.contact-tip {
  text-align: center;
  color: #444;
  font-size: 1.08rem;
  margin-bottom: 22px;
}
.contact-list {
  margin-bottom: 32px;
}
.contact-item {
  display: flex;
  align-items: center;
  font-size: 1.13rem;
  color: #222;
  margin-bottom: 16px;
}
.contact-link {
  color: #2a6cff;
  text-decoration: none;
  margin-left: 2px;
  transition: color 0.2s;
}
.contact-link:hover {
  color: #8d26e6;
  text-decoration: underline;
}
.online-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: 10px;
  background: #22c55e;
  color: #fff;
  font-size: 1.18rem;
  font-weight: 700;
  border: none;
  border-radius: 28px;
  padding: 0 36px;
  height: 54px;
  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.1);
  cursor: pointer;
  transition: background 0.2s;
}
.online-btn .iconfont {
  font-size: 1.4em;
  margin-right: 10px;
  color: #fff;
}
.online-btn:hover {
  background: #16a34a;
}
@media (max-width: 600px) {
  .contact-modal {
    padding: 18px 4vw 18px 4vw;
    max-width: 98vw;
    min-width: 0;
  }
  .contact-title {
    font-size: 1.3rem;
  }
  .online-btn {
    width: 100%;
    padding: 0;
  }
}
</style>
